import { Tag, Radio, Tooltip, Button, message } from 'antd'
import { EditModal, Empty } from '@/desktop/components'
import { useStreams } from '@/lib/utils'
import useUIMemory from '@/logics/memory'
import services from '@/services'
import { VideonumType, type SavedVideonum } from '@/services/resources/videonums'
import s from './index.module.less'

// 指定选中此视频号时要执行的操作
type ChooseOptions = {
  text: string
  action: (item: SavedVideonum) => void
}

export function ManageVideonums(props: {
  visible: boolean
  onClose: () => void
  choose?: ChooseOptions
}) {
  const { visible, onClose, choose } = props

  return <EditModal open={visible} onCancel={onClose} width="600px">
    <ManageVideonumsInner choose={choose} onClose={onClose} />
  </EditModal>
}

export function ManageVideonumsInner(props: { choose?: ChooseOptions; onClose: () => void }) {
  const { choose, onClose } = props
  const [videonums, account] = useStreams(services.resources.videonums.list, services.auth.account$)
  const [type, setType] = useUIMemory<VideonumType>('manage-videonum-type', VideonumType.Personal)
  const filtered = useMemo(() => videonums.filter(item => item.type === type), [videonums, type])

  useEffect(() => {
    void services.resources.videonums.load()
  }, [])

  return <div styleName="wrap">
    <header>
      <Radio.Group
        options={[
          { label: '我的视频号', value: VideonumType.Personal },
          { label: '全员视频号', value: VideonumType.Global },
        ]}
        onChange={e => setType(e.target.value as VideonumType)}
        value={type}
        optionType="button"
      />
    </header>
    <div styleName="list">
      {filtered.map(item => <VideonumCom
        key={item.id}
        item={item}
        isAdmin={account?.isAdmin ?? false}
        choose={choose}
        onClose={onClose}
      />)}
      {!filtered.length ? <Empty description="没有此类视频号" /> : null}
    </div>
    {type === VideonumType.Global ? (
      <footer>全员视频号由管理员统一配置，除管理员外无法更改</footer>
    ) : null}
  </div>
}

function VideonumCom(props: {
  item: SavedVideonum
  isAdmin: boolean
  choose?: ChooseOptions
  onClose: () => void
}) {
  const { item, isAdmin, choose, onClose } = props

  const onChoose = () => {
    if (choose) choose.action(item)
    onClose()
  }

  const remove = async () => {
    const resp = await services.resources.videonums.remove(item.id)
    if (resp.success) void message.success('视频号删除成功')
    else void message.warning(`视频号删除失败：${resp.error}`)
  }

  return <div styleName="item">
    <img src={item.avatar} />
    <div styleName="info">
      <Tag styleName="id">ID: {item.id}</Tag>
      <Tooltip title={item.desc}>
        <div styleName="title">{item.desc}</div>
      </Tooltip>
    </div>
    <div className={s.actions}>
      {choose ? <Button onClick={onChoose}>{choose.text}</Button> : null}
      {item.type === VideonumType.Personal || isAdmin ? (
        <Tooltip
          overlayClassName={s['delete-wrap']}
          trigger="click"
          placement="bottomRight"
          title={
            <Button danger onClick={remove}>
              删除
            </Button>
          }
        >
          <Button>...</Button>
        </Tooltip>
      ) : null}
    </div>
  </div>
}
